<template>
  <van-search
    v-model="value"
    show-action
    placeholder="请输入搜索关键词"
    background="rgb(255,99,71)"
    shape="round"
    @focus="onFocus"
  >
    <template #left-icon>
      <div class="logo-search">
        <van-icon name="/logo.png" />
        <van-icon name="search" />
      </div>
    </template>
    <template #left>
      <div @click="goCity">{{ currCityName }}&nbsp;</div>
    </template>
    <template #action>
      <div v-if="isLogin" @click="onGoMy">我的</div>
      <div v-else @click="onGoLogin">登录</div>
    </template>
  </van-search>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      currCityName: localStorage.getItem("cityName") || "地址",
      isLogin:sessionStorage.getItem("token")?true:false,
    };
  },
  methods: {
    // 获取搜索框焦点 进入搜索页
    onFocus() {
      this.$router.push("/Search");
    },
    onGoMy() {
      this.$router.push("/My");
    },
    onGoLogin() {
      this.$router.push("/Login");
    },
    goCity() {
      this.$router.push("/City");
    },
  },
};
</script>

<style scoped>
.logo-search {
  display: flex;
}
</style>
